<template>
  <div>
    <h1 class="title"> 关联关系设置</h1>

    <div style="width: 100%;min-width: 600px;height:100%;overflow: auto;background-color: white">
      <table width="100%">
        <tbody>
        <tr v-for="(index) in tables.length + 1" :key="index">
          <td v-for="(index2) in tables.length + 1" :key="index2"
              @click="handleSetting((index > 1 && index2 <= index && index2 != 1), index - 1, index2 - 1)"
              :class="{setting: index > 1 && index2 <= index && index2 != 1, noSetting: index > 1 && index2 > index}">
            <template v-if="index === 1 && index2 > 1">
              {{tables[index2 - 2].realTableName}}
            </template>
            <template v-if="index2 === 1 && index > 1">
              {{tables[index - 2].realTableName}}
            </template>
            <div v-if="index > 1 && index2 <= index && index2 != 1" v-html="isSetting(index,index2)">
            </div>
          </td>
        </tr>
        </tbody>

      </table>
      <el-dialog title="设置关系" :visible.sync="dialogTableVisible">
        <el-tabs :tab-position="'top'">
          <el-tab-pane label="一对一">
            <h1>关系:一</h1>

            <el-form :inline="true" :model="relative" class="demo-form-inline">
              <el-form-item label="选择表">
                <el-select @change="handleSelectedTableChange" v-model="relative.table1" placeholder="表:关系一">
                  <el-option v-for="(item, index) in selectTables" :key="index" :label="item.realTableName"
                             :value="item.realTableName"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="选择属性">
                <el-select v-model="relative.selectedProperty.table1" placeholder="请选择">
                  <el-option v-for="(item, index) in selectedTable.table1.rows" :key="index"
                             :label="`${item.name}(${item.desc})`" :value="item.name"></el-option>
                  <el-option label="唯一标识(code)" value="code"></el-option>
                </el-select>
              </el-form-item>
            </el-form>
            <h1>关系:一</h1>
            <el-form :inline="true" :model="relative" class="form-one-one">
              <el-form-item label="选择表">
                <el-select :disabled="true" v-model="relative.table2" placeholder="表:关系一">
                  <el-option v-for="(item, index) in selectTables" :key="index" :label="item.realTableName"
                             :value="item.realTableName"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="选择属性">
                <el-select v-model="relative.selectedProperty.table2" placeholder="请选择">
                  <el-option v-for="(item, index) in selectedTable.table2.rows" :key="index"
                             :label="`${item.name}(${item.desc})`" :value="item.name"></el-option>
                  <el-option label="唯一标识(code)" value="code"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="handleAddRelative('1')">添加</el-button>
              </el-form-item>
            </el-form>
          </el-tab-pane>
          <el-tab-pane label="一对多">
            <h1>关系:一</h1>

            <el-form :inline="true" :model="relative" class="demo-form-inline">
              <el-form-item label="选择表">
                <el-select @change="handleSelectedTableChange" v-model="relative.table1" placeholder="表:关系一">
                  <el-option v-for="(item, index) in selectTables" :key="index" :label="item.realTableName"
                             :value="item.realTableName"></el-option>

                </el-select>
              </el-form-item>
              <el-form-item label="选择属性">
                <el-select v-model="relative.selectedProperty.table1" placeholder="请选择">
                  <el-option v-for="(item, index) in selectedTable.table1.rows" :key="index"
                             :label="`${item.name}(${item.desc})`" :value="item.name"></el-option>
                  <el-option label="唯一标识(code)" value="code"></el-option>
                </el-select>
              </el-form-item>
            </el-form>
            <h1>关系:多</h1>
            <el-form :inline="true" :model="relative" class="form-one-one">
              <el-form-item label="选择表">
                <el-select :disabled="true" v-model="relative.table2" placeholder="表:关系一">
                  <el-option v-for="(item, index) in selectTables" :key="index" :label="item.realTableName"
                             :value="item.realTableName"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="选择属性">
                <el-select v-model="relative.selectedProperty.table2" placeholder="请选择">
                  <el-option v-for="(item, index) in selectedTable.table2.rows" :key="index"
                             :label="`${item.name}(${item.desc})`" :value="item.name"></el-option>
                  <el-option label="唯一标识(code)" value="code"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="handleAddRelative('2')">添加</el-button>
              </el-form-item>
            </el-form>
          </el-tab-pane>
          <el-tab-pane label="多对多">
            <h1>第三关联表</h1>
            <el-select v-model="foreignTable" placeholder="表:关系一">
              <el-option v-for="(item, index) in relativeTable" :key="index" :label="item.realTableName"
                         :value="item"></el-option>
            </el-select>
            <h1>关系:多</h1>

            <el-form size="mini" :inline="false" :model="relative" class="demo-form-inline">
              <el-form-item label="选择表">
                <el-select @change="handleSelectedTableChange" v-model="relative.table1" placeholder="表:关系一">
                  <el-option v-for="(item, index) in selectTables" :key="index" :label="item.realTableName"
                             :value="item.realTableName"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="选择属性">
                <el-select v-model="relative.selectedProperty.table1" placeholder="请选择">
                  <el-option v-for="(item, index) in selectedTable.table1.rows" :key="index"
                             :label="`${item.name}(${item.desc})`" :value="item.name"></el-option>
                  <el-option label="唯一标识(code)" value="code"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="关联属性">
                <el-select v-model="relative.foreign.table1" placeholder="请选择">
                  <el-option v-for="(item, index) in foreignTableRows" :key="index"
                             :label="`${item.name}(${item.desc})`" :value="item.name"></el-option>
                  <el-option label="唯一标识(code)" value="code"></el-option>
                </el-select>
              </el-form-item>
            </el-form>
            <h1>关系:多</h1>
            <el-form size="mini" :inline="false" :model="relative" class="form-one-one">
              <el-form-item label="选择表">
                <el-select :disabled="true" v-model="relative.table2" placeholder="表:关系一">
                  <el-option v-for="(item, index) in selectTables" :key="index" :label="item.realTableName"
                             :value="item.realTableName"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="选择属性">
                <el-select v-model="relative.selectedProperty.table2" placeholder="请选择">
                  <el-option v-for="(item, index) in selectedTable.table2.rows" :key="index"
                             :label="`${item.name}(${item.desc})`" :value="item.name"></el-option>
                  <el-option label="唯一标识(code)" value="code"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="关联属性">
                <el-select v-model="relative.foreign.table2" placeholder="请选择">
                  <el-option v-for="(item, index) in foreignTableRows" :key="index"
                             :label="`${item.name}(${item.desc})`" :value="item.name"></el-option>
                  <el-option label="唯一标识(code)" value="code"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="handleAddRelative('3')">添加</el-button>
              </el-form-item>
            </el-form>
          </el-tab-pane>
          <el-tab-pane label="其他操作">
            <el-button type="primary" @click="handleDeleteRelative">删除</el-button>
          </el-tab-pane>
        </el-tabs>
      </el-dialog>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Relative',
  data () {
    return {
      api: {
        add: this.$api.relative.add,
        list: this.$api.relative.list,
        delete: this.$api.relative.delete
      },
      tables: [],
      dialogTableVisible: false,
      relative: {
        relativeType: '',
        table1: '',
        table2: '',
        foreignTable: '',
        moreProperty: {},
        foreign: {
          table1: null,
          table2: null
        },
        selectedProperty: {
          table1: null,
          table2: null
        }
      },
      selectTables: [],
      selectedTable: {
        table1: [],
        table2: []
      },
      foreignTable: null,
      setup: [],
      tableNumber: null
    }
  },
  methods: {
    initRelative () {
      this.relative.table1 = null
      this.relative.table2 = null
      for (let item in this.relative.selectedProperty) {
        this.relative.selectedProperty[item] = null
      }
    },
    handleSetting (isSetting, row, col) {
      if (!isSetting) {
        return
      }
      this.initRelative()
      this.dialogTableVisible = !this.dialogTableVisible
      this.selectTables = []
      this.selectTables.push(this.tables[row - 1])
      this.selectTables.push(this.tables[col - 1])
    },
    handleAddRelative (type) {
      this.relative.relativeType = type
      let table1 = this.relative.table1
      this.relative.moreProperty[table1] = this.relative.selectedProperty.table1
      let table2 = this.relative.table2
      this.relative.moreProperty[table2] = this.relative.selectedProperty.table2
      if (type === '3') {
        this.relative.foreign[table1] = this.relative.foreign.table1
        this.relative.foreign[table2] = this.relative.foreign.table2
        this.relative.foreignTable = this.foreignTable.realTableName
      }
      this.$httpf({ url: this.api.add, json: this.relative }, data => {
        this.dialogTableVisible = false
        this.handleRelativeList()
      })
    },
    handleSelectedTableChange () {
      if (this.relative.table1 === this.selectTables[0].realTableName) {
        this.selectedTable.table1 = this.selectTables[0]
        this.selectedTable.table2 = this.selectTables[1]
        this.relative.table2 = this.selectTables[1].realTableName
      } else {
        this.relative.table2 = this.selectTables[0].realTableName
        this.selectedTable.table1 = this.selectTables[1]
        this.selectedTable.table2 = this.selectTables[0]
      }
    },
    handleRelativeList () {
      this.$httpf({ url: this.api.list }, data => {
        let list = data.data.data.list
        if (list) {
          this.initSetup(list)
        }
      })
    },
    initSetup (list) {
      const returnResult = {}
      if (list) {
        for (let i = 0; i < list.length; i++) {
          let big = null
          let little = null
          if (this.tableNumber[list[i].table1] > this.tableNumber[list[i].table2]) {
            big = this.tableNumber[list[i].table1]
            little = this.tableNumber[list[i].table2]
          } else {
            big = this.tableNumber[list[i].table2]
            little = this.tableNumber[list[i].table1]
          }
          returnResult[big + '' + little] = list[i]
        }
        this.setup = returnResult
      }
    },
    handleRelativeType (typeNumber) {
      if (typeNumber === '1') {
        return '一对一'
      }
      if (typeNumber === '2') {
        return '一对多'
      }
      if (typeNumber === '3') {
        return '多对多'
      }
    },
    numberTable () {
      let tables = this.tables
      console.log(tables)
      const returnArray = {}
      if (tables) {
        for (let i = 0; i < tables.length; i++) {
          returnArray[tables[i].realTableName] = i + 1
        }
      }
      return returnArray
    },
    isSetting (index, index2) {
      const index_ = index - 1
      const index2_ = index2 - 1
      const indexJoin = index_ + '' + index2_
      let setupElement = this.setup[indexJoin]
      if (!setupElement) {
        return '设置'
      }
      let typeNumber = setupElement.relativeType
      const type = this.handleRelativeType(typeNumber)
      const table1 = setupElement.table1
      const table2 = setupElement.table2
      const table1Property1 = setupElement.moreProperty[table1]
      const table1Property2 = setupElement.moreProperty[table2]
      if (setupElement) {
        if (typeNumber === '1') {
          return `<div style="text-align: left">关系:${type}<br>关系一:表-${table1},属性:${table1Property1}<br>关系一:表-${table2},属性:${table1Property2}</div>`
        } else if (typeNumber === '2') {
          return `<div style="text-align: left">关系:${type}<br>关系一:表-${table1},属性:${table1Property1}<br>关系多:表-${table2},属性:${table1Property2}</div>`
        } else if (typeNumber === '3') {
          let foreignTable = setupElement.foreignTable
          let foreignTable1 = setupElement.foreign.table1
          let foreignTable2 = setupElement.foreign.table2
          return `<div style="text-align: left">第三关联表:${foreignTable}<br>关系:${type}<br>关系多:表-${table1},属性:${table1Property1},关联属性:${foreignTable1}<br>关系多:表-${table2},属性:${table1Property2},关联属性:${foreignTable2}</div>`
        }
      }
      return '设置'
    },
    handleDeleteRelative () {
      const table1 = this.selectTables[0].realTableName
      const table2 = this.selectTables[1].realTableName
      this.$httpf({ url: this.api.delete, paras: { table1: table1, table2: table2 } }, data => {
        this.dialogTableVisible = false
        this.handleRelativeList()
      })
    }
  },
  computed: {
    relativeTable () {
      if (!this.selectTables[0]) {
        return
      }
      return this.tables.filter(e => (e.realTableName !== this.selectTables[0].realTableName && e.realTableName !== this.selectTables[1].realTableName))
    },
    foreignTableRows () {
      if (this.foreignTable) {
        return this.foreignTable.rows
      }
      return []
    }
  },
  created () {
    let tables = window.sessionStorage.tables
    if (tables) {
      this.tables = JSON.parse(tables)
      this.tableNumber = this.numberTable()
    }
    this.handleRelativeList()
  }
}
</script>

<style scoped lang="less">
  td {
    min-width: 145px;
    height: 63px;
    font: 14px/23px 'Microsoft YaHei';
    text-align: center;
    border: 1px solid #ebeef5;
  }

  table {
    overflow: auto;
    border-collapse: collapse;
    border-spacing: 0px;
    margin: 0 auto;
  }

  tr {
    overflow: auto;
  }

  .relative {
    padding: 10px 0 0 0;
    margin: 0 auto;
    width: 500px;

    .row {
      display: flex;
      height: 80px;
      margin: 0 auto;

      .block {
        width: 80px;
        height: 80px;
        text-align: center;
        line-height: 80px;
        border: 1px solid;
      }
    }
  }

  .setting {
    cursor: pointer;
  }

  .noSetting {
    background-color: #2c3e50;
  }

  .setting:hover {
    color: red;
  }

</style>
